<template>
	<view v-if="vote">
		<image :src="imgUrl + vote.image" v-if="vote.image" mode="widthFix" style="width: 100%;display: block;"
			@click="link(vote.link)" />

		<view class="common">
			<u-text :bold="true" :text="vote.name" align="center" size="20" lineHeight="40"></u-text>

			<!-- #ifdef MP-WEIXIN -->
			<ad :unit-id="ad.vote_rule" v-if="ad.vote_rule" ad-intervals="30" style="margin-top: 10px;"></ad>
			<!-- #endif -->
				
			<u-text prefixIcon="star-fill" text="活动时间" align="center" lineHeight="50"
				suffixIcon="star-fill" :iconStyle="{'margin': '0px 10px','color':color_value}" margin="10px 0px">
			</u-text>
			<u-text :text="vote.start_time_text + ' ~ ' + vote.end_time_text" align="center"></u-text>

			<block v-if="vote.apply_status == 1" style="margin-top: 200px;">
				<u-text prefixIcon="star-fill" text="报名时间" align="center" lineHeight="50"
					suffixIcon="star-fill" :iconStyle="{'margin': '0px 10px','color':color_value}" margin="20px 0px">
				</u-text>
				<u-text :text="vote.apply_time" align="center"></u-text>
			</block>

			<u-text prefixIcon="star-fill" text="活动规则" align="center" lineHeight="50"
				suffixIcon="star-fill" :iconStyle="{'margin': '0px 10px','color':color_value}" margin="20px 0px">
			</u-text>

			<view class="rules-line">
				<text>每人每天{{ vote.btn_txt||'投票' }}次数:</text>
				<text class="rule-text">{{vote.day_limit_count}}</text>
			</view>
			<view class="rules-line">
				<text>每人{{ vote.btn_txt||'投票' }}总次数:</text>
				<text class="rule-text">{{vote.limit_count}}</text>
			</view>
			<view class="rules-line">
				<text>每日重复{{ vote.btn_txt||'投票' }}给同一选项:</text>
				<text class="rule-text">{{vote.day_limit_status_txt}}</text>
			</view>
			<view class="rules-line" v-if="vote.sponsor_name">
				<text>主办方:</text>
				<text class="rule-text">{{vote.sponsor_name}}</text>
			</view>
			<view class="rules-line" v-if="vote.sponsor_mobile">
				<text>联系电话:</text>
				<text class="rule-text">{{vote.sponsor_mobile}}</text>
			</view>
			
			<u-text prefixIcon="star-fill" text="活动介绍" align="center" lineHeight="50"
				suffixIcon="star-fill" :iconStyle="{'margin': '0px 10px','color':color_value}" margin="20px 0px">
			</u-text>
			<view class="rule-text">
				<rich-text class="rich-text" :nodes="vote.desc"></rich-text>
			</view>
		</view>
		<tabbar :vote_id="vote_id" :temp_name="vote.temp_name"></tabbar>
		
		<music :music="vote.music"></music>
	</view>
</template>

<script>
	import music from '@/components/music/music.vue';
	import tabbar from '@/components/tabbar/vote-tabbar.vue';
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				ad: 'common/ad',
			})
		},
		components: {
			tabbar,music
		},
		onShow() {
			uni.hideHomeButton()
		},
		data() {
			return {
				color_value: '',
				vote_id: '',
				vote: null,
			};
		},
		async onLoad(options) {
			await this.$onLaunched;
			this.vote_id = options.vote_id;

			this.http('vote/detail', {
				vote_id: this.vote_id
			}, 'get').then(res => {
				this.vote = res.data;
				console.log(res.data);
				if (this.vote.shield_status == 1){
					//屏蔽流量主
					this.$store.state.common.ad = null
				}else{
					// #ifdef MP-WEIXIN
					this.adUtils.cp.load('vote_rule_cp')
					// #endif
				}
				if (res.data.day_limit_status == 1) {
					this.vote.day_limit_status_txt = '允许';
				} else {
					this.vote.day_limit_status_txt = '不允许';
				}
				if (res.data.limit_count == 0) {
					this.vote.limit_count = '无限制';
				}
				if (res.data.apply_status == 1) {
					if (res.data.end_apply_status == 1) {
						this.vote.apply_time = '长期';
					} else {
						this.vote.apply_time = res.data.apply_start_time_text + ' ~ ' + res.data
							.apply_end_time_text;
					}
				}

				if (res.data.desc) {
					this.vote.desc = this.utils.formatRichText(res.data.desc)
				}
				
				if (this.vote.temp_name == 'qqsh') {
					this.color_value = '#9c4e1d'
				}else if (this.vote.temp_name == 'huajia') {
					this.color_value = '#00BFFF'
				}else if (this.vote.temp_name == 'sheji') {
					this.color_value = '#fa3612'
				}else if (this.vote.temp_name == 'fengcai') {
					this.color_value = '#AB1600'
				}else if (this.vote.temp_name == 'jiewu') {
					this.color_value = '#F842BD'
				}else if (this.vote.temp_name == 'shufa') {
					this.color_value = '#000000'
				}else if (this.vote.temp_name == 'wang') {
					this.color_value = '#31CDCA'
				}else if (this.vote.temp_name == 'sheying') {
					this.color_value = '#262621'
				}else if (this.vote.temp_name == 'youxiu') {
					this.color_value = '#41d1fb'
				}else if (this.vote.temp_name == 'liuyi') {
					this.color_value = '#7ef903'
				}
				
				// #ifdef MP-WEIXIN
				uni.$u.mpShare = {
					title: this.vote.name,
					path: '/pages/vote/index?vote_id=' + this.vote.id,
					imageUrl: this.imgUrl + this.vote.image,
				}
				// #endif
				this.utils.share({
					title: this.vote.name,
					imgUrl: this.imgUrl + this.vote.image,
				})
			});
		},
		methods: {

		}
	};
</script>
<style>
	.common {
		background-color: #fff;
		padding: 30rpx 50rpx 40rpx;
	}

	.rules-line {
		margin-bottom: 20rpx;
		font-size: 15px;
		color: #303133;
	}

	.rules-line .rule-text {
		margin-left: 10rpx;
	}
	.rich-text{
		font-size: 15px;
		color: #303133;
	}
</style>
